<template>
	<view class="page">
		<u--image v-if='profile.bg_image' :src="profile.bg_image" width="100%" height="500rpx"></u--image>
		<view v-else class="bg"></view>
		<view v-if='profile.bg_image' class="masking"></view>
		<view class="userBox">
			<view class="img" v-if='token'>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
					style="height: 100rpx;width: 100rpx;"></button>
				<u-avatar v-if="userInfo.is_set_avatar" :src="userInfo.avatar" size="100rpx"></u-avatar>
				<view v-else>
					<u-icon name="camera" size="80rpx" color='#fff'></u-icon>
				</view>
			</view>
			<view v-else @click="lo">
				<u-avatar :src="userInfo.avatar" size="100rpx"></u-avatar>
			</view>
			<div style="width: 50vw;">
				<view v-if="token"
					style="display: flex;height: 100rpx;font-size: 26rpx;flex-direction: column;margin-left: 40rpx;">
					<view style="display: flex;">
						<view style="max-width: 100%;margin-right: 10rpx;">
							<input style="color: #fff;" type="nickname" 
								v-model="nick_name" @blur='nameBlur' @change='change' />
						</view>
					</view>

					<view class='uuidBox' @click="copy" v-if="token">id：{{ userInfo.uuid }}
						<view class="iconfont icon-fuzhi"></view>
					</view>
				</view>
				<text class="userName" @click="lo" v-else>点击登录/注册</text>
			</div>
		</view>
		<!-- 	<view class="blurb" style="width: 90vw;" v-if="token&&userInfo.brief_introduce">
			<u--text :lines="2" :text='userInfo.brief_introduce' size='24rpx' color='#fff'></u--text>
		</view>
		<view class="tag" v-if='token'>
			<text class="label" v-if="typeof_fun(profile.profession_tag)">{{profile.profession_tag}}</text>
			<text v-else class="label" v-for="(item,index) in profile.profession_tag"
				:key='item'>{{item.length>5?item.substring(0,5)+'...':item}}</text>

		</view> -->
		<scroll-view scroll-y="true" class="content">
			<view class="typeTitle">
				功能
			</view>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="clickGrid">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" size="50rpx"
						:label="listItem.title" labelPos='bottom' space='16rpx' labelSize='26rpx'></u-icon>
				</u-grid-item>
			</u-grid>
			<view v-if='userInfo.is_company_administrator&&token' class="ShopBox" @click="jumpShop">
				<view>
					<u-icon name="bag" size="40rpx"></u-icon>
					<text style="margin-left: 35rpx;">
						工地管理
					</text>
				</view>
				<view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view>
			</view>
			<view v-if='token' class="loginOut"><u-button type="primary" v-if="token" text="退出登录"
					@click="loginOut"></u-button></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				profile: {},
				token: null,
				openid: null,
				disabled: false,
				loginCode: null,
				list: [{
						name: 'calendar',
						title: '我的家'
					},
					{
						name: 'plus-people-fill',
						title: '亲友'
					},
				],
				nick_name: ''
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('user')
			this.nick_name = uni.getStorageSync('user')?.nick_name
			this.profile = uni.getStorageSync('user')?.profile
			this.token = uni.getStorageSync('token')
			this.openid = uni.getStorageSync('openid')

		},
		methods: {
			clickGrid(e) {
				if (e == 0) {
					this.$utils.navigateTo({
						url: '/My/home'
					})
				} else if (e == 1) {
					this.$utils.navigateTo({
						url: '/My/relative'
					})
				}
			},
			typeof_fun(str) {
				return typeof str == 'string'
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				console.log(avatarUrl)
				uni.uploadFile({
					url: this.$config.url + '/api/my/detail/avatar/upload', // 仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					header: {
						'Content-Type': 'application/json;charset=UTF-8',
						'Authorization': "Bearer " + this.token
					},
				});
				uni.setStorageSync('user', {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				});
				this.userInfo = {
					...this.userInfo,
					avatar: avatarUrl,
					is_set_avatar: 1
				}
			},
			lo() {
				if (this.disabled) return
				this.disabled = true
				if (this.openid) {
					uni.showLoading({
						title: '登录中...',
					})
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (loginRes) => {
							this.loginCode = loginRes.code
							this.getOpenidAndSession()
						},
						fail: () => {
							this.disabled = false
							uni.hideLoading()
						}
					});
				} else {
					uni.setStorageSync('pageUrl', '/home_c/index')
					this.$utils.navigateTo({
						url: '/login/index',
					})
					this.disabled = false
				}

			},
			getOpenidAndSession() {
				this.$api.Login.Session({
					code: this.loginCode
				}).then(res => {
					this.openid = res.data.openid
					this.loginSilent()
				}).catch(err => {
					this.disabled = false
					uni.hideLoading()
				})
			},
			loginSilent() {
				wx.getUserInfo({
					success: resUser => {
						this.$api.Login.Silent({
							openId: this.openid,
							rawData: resUser.rawData,
							signature: resUser.signature,
							encryptedData: resUser.encryptedData,
							iv: resUser.iv
						}).then(res => {
							uni.setStorageSync('openid', this.openid);
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('user', res.data.user);
							this.userInfo = res.data.user
							this.profile = res.data.user.profile
							this.token = res.data.token
							uni.hideLoading()
							this.disabled = false
						}).catch(err => {
							this.disabled = false
							uni.hideLoading()
						})
					}
				})
			},
			loginOut() {
				uni.setStorageSync('token', null);
				uni.setStorageSync('user', null);
				this.userInfo = {}
				this.token = null
			},
			copy() {
				uni.setClipboardData({
					data: this.userInfo.uuid, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.$u.toast('已复制到粘贴板')
					}
				});
			},
			change(e) {
				this.nick_name = e.detail.value
			},
			nameBlur() {
				uni.setStorageSync('user', {
					...this.userInfo,
					nick_name: this.nick_name,
				});
				this.userInfo = {
					...this.userInfo,
					nick_name: this.nick_name,
				}
				setTimeout(() => {
					this.$api.Edit.Nickname({
						nick_name: this.nick_name
					})
				}, 2000)
			},
			jumpShop() {
				this.$utils.navigateTo({
					url: "/shop/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginOut {
		margin: auto;
		margin-top: 40rpx;
	}

	.ShopBox {
		width: 100%;
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		background: #f9f9f9;
		justify-content: space-between;
		padding: 10rpx;
		font-size: 30rpx;
		border: 1px solid #f1f1f1;
		border-radius: 8rpx;

		>view:first-child {
			margin-left: 26%;
			display: flex;
			align-items: center;
		}

		>view:last-child {
			margin-right: 5%;
			display: flex;
			align-items: center;
		}
	}

	.typeTitle {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin: 0 auto 20rpx;
		width: 100%;
		justify-content: space-between;

		&:before {
			content: '';
			background-color: #bfbfbf;
			flex: 0.3;
			height: 2rpx;
			display: inline-block;
			margin-right: 40rpx;
		}

		&:after {
			content: '';
			background-color: #bfbfbf;
			flex: 1;
			height: 2rpx;
			display: inline-block;
			margin-left: 40rpx;
		}
	}

	.page {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.bg {
		height: 500rpx;
		background: linear-gradient(to right, #2c4878, #314d7d, #173162);
	}

	.masking {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
		position: absolute;
		width: 100%;
		top: 0;
		height: 500rpx;
	}

	.img {
		width: 100rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 100%;
		height: 100rpx;

		.avatar-wrapper {
			opacity: 0;
			position: absolute;
			z-index: 5;
			width: 180rpx;
			height: 180rpx;
		}
	}

	.userBox {
		position: absolute;
		top: 150rpx;
		left: 40rpx;
		display: flex;
	}

	.uuidBox {
		display: flex;
		color: #fff;
	}

	.userName {
		color: #fff;
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.blurb {
		color: #fff;
		font-size: 26rpx;
		font-weight: 400;
		position: absolute;
		top: 300rpx;
		left: 40rpx;
	}

	.label {
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
		color: #fff;
		background-color: rgba($color: #fff, $alpha: 0.3);
		font-weight: 600;
		border-radius: 50rpx;
	}

	.tag {
		display: flex;
		font-size: 26rpx;
		font-weight: 400;
		position: absolute;
		top: 360rpx;
		left: 40rpx;

	}

	.content {
		width: 100%;
		background-color: #fff;
		border-radius: 18rpx 18rpx 0 0;
		position: relative;
		top: -84rpx;
		box-sizing: border-box;
		padding: 20rpx 60rpx 10rpx;
		height: calc(100% - 500rpx + 84rpx);
	}
</style>